<template>
  <view class="stock-market">
    <view class="title">
      <h3>股市板块</h3>
    </view>
    <!-- 搜索框 -->
    <view class="search-bar">
      <up-input
        shape="circle"
        placeholder="搜索股票"
        prefixIcon="search"
        class="search-input"
        prefixIconStyle="font-size: 22px;color: #909399"
      ></up-input>
    </view>
    <!-- 板块列表 -->
    <view class="board-list">
      <view class="board-item" v-for="item in boardList" @click="ToList(item.id)">
        <!-- 图标 -->
        <image :src="'../../static/'+item.icon" class="board-icon"></image>
        <!-- 文本内容 -->
        <view class="board-text">
          <view class="board-name">{{ item.name }}</view>
          <text class="board-desc">{{ item.content }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 板块列表数据
const boardList = ref([]);
// 股票列表数据
const stockList = ref([]);
// 加载状态
const loading = ref(false);

// 获取板块列表
onMounted(async () => {
  try {
    const res = await axios.post('/stock_board/list/page', {
      current: 1,
      pageSize: 10
    });
    boardList.value = res.data.data.records;
  } catch (error) {
    console.error('获取板块列表失败:', error);
  }
});

// 获取指定板块的股票列表
async function fetchStocksByBoard(boardId: string) {
  loading.value = true;
  try {
    const response = await axios.get(`/stock/list/by_board/${boardId}`);
    stockList.value = response.data.data.records;
  } catch (error) {
    console.error('获取股票列表失败:', error);
  } finally {
    loading.value = false;
  }
}

// 跳转到列表页
const ToList = (itemId: string) => {
  // 先获取该板块的股票列表
  fetchStocksByBoard(itemId);
  
  // 然后跳转页面
  uni.navigateTo({
    url: `/pages/list?id=${itemId}`,
  });
};
</script>

<style scoped>
.stock-market {
  padding: 10px;
  background-color: #fff;
}
.title {
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.search-bar {
  margin-bottom: 15px;
}
.search-input {
  background-color: rgb(248, 248, 248);
}
.board-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.board-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
}
.board-icon {
  width: 60px;
  height: 60px;
}
.board-text {
  flex: 1;
}
.board-name{
  font-size: 14px;
  color: #000;
  line-height: 1.4;
  font-weight: bold;
}
.board-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}
</style>
